<template>
  <div class="card p-3" style="min-height: 75vh">
    <div class="w-100">
      <chart-customer-area></chart-customer-area>
    </div>
    <analy-list ref="listRef" :query-params="queryParams"></analy-list>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getMonthLastDayDate } from '@/common/plugins/tools/date'
import ChartCustomerArea from '@/credit/views/city/index/ChartCustomerArea'
import AnalyList from '@/credit/views/city/report/AnalyList'

export default {
  components: {
    ChartCustomerArea,
    AnalyList,
  },
  props: {},
  data() {
    return {
      queryParams: {
        clientId: '',
        addressCode: '',
        startDate: '',
        endDate: '',
        bankCode: '',
        busStatus: '',
        guaType: '1,2,3,4',
        mainBus: '',
      },
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.setDateParams()
  },
  mounted() {},
  methods: {
    setDateParams() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth()

      let startYear = year - 1
      let startMonth = month + 1
      if (startMonth === 12) {
        startYear++
        startMonth = 0
      }
      const start = new Date(startYear, startMonth, 1)
      const end = getMonthLastDayDate(year, month)

      this.queryParams.startDate = start
      this.queryParams.endDate = end
      this.queryParams.clientId = this.clientId
    },
  },
}
</script>

<style lang="scss" scoped></style>
